<template>
  <div class="item">
    <router-link
      :to="{
        path: '/singer/detail',
        query: {
          id: prop.item.id,
        },
      }"
      class="faceImg"
    >
      <img
        :src="`${item.picUrl}?param=120y120`"
        :alt="item.name"
        :title="`${item.name}的音乐`"
      />
    </router-link>
    <div class="item_footer">
      <router-link
        :to="{
          path: '/singer',
          query: {
            id: prop.item.id,
          },
        }"
        :title="`${item.name}的音乐`"
        >{{ prop.item.name }}</router-link
      >
      <SvgIcon class="iconfont" icon="icon-geren2"></SvgIcon>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'SingerItem',
}
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { reqArtistList } from '@/api/singer'
import SvgIcon from '@/components/SvgIcon/index.vue'

const prop = defineProps({
  item: {
    // 歌手信息
    type: Object,
    required: true,
  },
})

onMounted(() => {
  // console.log(prop.item)
})
</script>

<style lang="less" scoped>
.item {
  width: 147px;
  height: 184px;
  padding: 0 17px 30px 0;
  .faceImg {
    width: 130px;
    height: 130px;
    img {
      &:hover {
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
  .item_footer {
    width: 120px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    a {
      color: #000;
      font-size: 12px;
      &:hover {
        text-decoration: underline;
      }
    }
    .iconfont {
      &:hover {
        cursor: pointer;
        transform: scale(1.2);
      }
    }
  }
}
</style>
